<%--
  Created by IntelliJ IDEA.
  User: 天天好心情
  Date: 2024/10/23
  Time: 14:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <%--搜索对话框--%>
    <%--根据关键字查询--%>
    <el-form :inline="true" :model="selectForm" class="demo-form-inline" clearable>
        <el-form-item label="姓名">
            <el-input v-model="selectForm.branchname" placeholder="请输入店铺名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="branchAll">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-circle-plus" @click="dialogVisible = true">添加店铺</el-button>
        </el-form-item>
    </el-form>

    <%--点击添加时显示的表单--%>
    <el-dialog
            title="添加店铺"
            :visible.sync="dialogVisible"
            width="50%"
            @closed="addClose"
            >
        <el-form ref="form" :model="addbranch" :rules="rules" label-width="80px">
            <el-form-item label="门店编号" prop="branchid">
                <el-input v-model="addbranch.branchid"></el-input>
            </el-form-item>
            <el-form-item label="门店名称" prop="branchname">
                <el-input v-model="addbranch.branchname"></el-input>
            </el-form-item>
            <el-form-item label="开店时间" prop="starttime">
                <el-date-picker
                        v-model="addbranch.starttime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="门店地址" prop="address">
                <el-input v-model="addbranch.address"></el-input>
            </el-form-item>
            <el-form-item label="分配店长" prop="branchid">
                <el-select v-model="addbranch.staffid" placeholder="--请选择--">
                    <el-option v-for="b in staffList" :label="b.staffname" :value="b.staffid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态选择" prop="deptid">
                <el-select v-model="addbranch.state" placeholder="--请选择--">
                    <el-option label="营业" value="1"></el-option>
                    <el-option label="整顿" value="0"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="okAddBranch">确 定</el-button>
        </span>
    </el-dialog>
    <%--展示所有信息--%>
    <%--主页面 展示所有--%>
    <template>
        <el-table
                :data="branchInFo"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="branchid"
                    label="门店编号">
            </el-table-column>
            <el-table-column
                    prop="branchname"
                    label="门店名">
            </el-table-column>
            <el-table-column
                    prop="starttime"
                    label="开店时间">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="staffname"
                    label="店长">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.staffname==null">无</el-tag>
                    <span v-else>{{scope.row.staffname}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="rs"
                    label="本店人数">
                <template slot-scope="scope">
                    <span v-if="scope.row.rs==null">0</span>
                    <span v-else>{{scope.row.rs}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="状态"
                    width="120">
                <template slot-scope="scope">
                    <el-tag
                            v-if="scope.row.state==1"
                            type="success"
                            effect="dark">
                        营业
                    </el-tag>
                    <el-tag
                            v-else
                            type="info"
                            effect="dark">
                        整顿
                    </el-tag>
                </template>
            </el-table-column>
            <%--操作模块--%>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="450">
                <template slot-scope="scope">
                    <%--只有总店才能显示--%>
                    <span v-if="scope.row.branchid==12138">
                            <div style="text-align: center; margin: 5px; color: darkred; font-size: 30px; font-weight: 600;">
                            总&nbsp;&nbsp;&nbsp;&nbsp;店
                            </div>
                        </span>
                    <span v-else>
                            <el-button size="small" type="" @click="editBranch(scope.row) " round>编辑</el-button>
                        <span v-if="User.staffid==111">
                            <el-button size="small" type="warning" round
                                       @click="gengpanduan(scope.row)">
                                更换店长
                            </el-button>
                            <el-button size="small" type="danger" round
                                       @click="diaoli(scope.row)">
                                店长调离
                            </el-button>
                        </span>

                            <el-popconfirm
                                    confirm-button-text='确定'
                            <%--确定触发的事件--%>
                                    @confirm="zhengDun(scope.row)"
                            <%--取消触发的事件--%>
                                    @cancel="quxiao"
                                    cancel-button-text='再想想'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="是否要修改为营业/整顿吗？">
                                <el-button size="small" type="primary" slot="reference" round>
                                整顿
                            </el-button>
                            </el-popconfirm>
                             <el-popconfirm
                                     confirm-button-text='确定'
                             <%--确定触发的事件--%>
                                     @confirm="deleteBranch(scope.row)"
                             <%--取消触发的事件--%>
                                     @cancel="quxiao"
                                     cancel-button-text='再想想'
                                     icon="el-icon-info"
                                     icon-color="red"
                                     title="是否要该门店吗？">
                                <el-button size="small" type="primary" slot="reference" round>
                                删除
                            </el-button>
                            </el-popconfirm>
                        </span>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <%--修改对话框--%>
    <el-dialog
            title="修改对话框"
            :visible.sync="editDialog"
            width="30%">
        <el-form ref="editform1" :model="editForm" :rules="rules1" label-width="80px">
            <el-form-item label="门店编号" prop="branchid">
                <el-input v-model="editForm.branchid" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="门店名称" prop="branchname">
                <el-input v-model="editForm.branchname"></el-input>
            </el-form-item>
            <el-form-item label="开店时间" prop="starttime">
                <el-date-picker
                        v-model="editForm.starttime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期时间"
                <%--                        禁止修改--%>
                        :disabled="true">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="门店地址" prop="address">
                <el-input v-model="editForm.address"></el-input>
            </el-form-item>
            <el-form-item label="店长名称" prop="staffname">
                <el-select v-model="editForm.staffname" placeholder="--请选择--" :disabled="true">
                    <el-option v-for="b in staffList"
                               :label="b.staffname"
                               :value="b.staffid" vcbbvc
                               :disabled="true">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog=false">取 消</el-button>
        <el-button type="primary" @click="okEditBranch">确 定</el-button>
        </span>
    </el-dialog>

    <%--更换店长对话框--%>
    <el-dialog
            title="更换店长"
            :visible.sync="gengDialog"
            width="30%">
        <%--        ==================================================================================================--%>
        <%--    :rules="rules2" ref="editform2"--%>
        <template slot-scope="scope">
            <el-form :model="gengForm" label-width="80px">
                <el-form-item label="门店名称" prop="branchname">
                    <el-input v-model="gengForm.branchname" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="分配店长" prop="branchid">
                    <el-select v-model="gengForm.staffname" placeholder="--请选择--">
                        <el-option v-for="b in staffList" :label="b.staffname" :value="b.staffid" vcbbvc></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="gengDialog=false">取 消</el-button>
                <el-button type="primary" @click="updatedianzhang()">确 定</el-button>
            </span>
        </template>
    </el-dialog>

    <%--调离店长对话框--%>
    <el-dialog
            title="调离店长"
            :visible.sync="diaoliDialog"
            width="30%"
    <%--@close="closeDiaoLi"--%>
    >
        <template slot-scope="scope">
            <el-form :model="diaoliForm" label-width="80px">
                <el-form-item label="工号">
                    <el-input v-model="diaoliForm.staffid" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="diaoliForm.staffname" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="原门店">
                    <el-input v-model="diaoliForm.branchname" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="所在职位">
                    <el-input v-model="店长" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="新门店">
                    <el-select v-model="diaoliForm.newbranchid" placeholder="--请选择--">
                        <el-option v-for="b in allBranch"
                                   :label="b.branchname"
                                   :value="b.branchid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="新职位">
                    <el-select v-model="diaoliForm.newroleid" placeholder="--请选择--">
                        <%--不显示职位是店长的--%>
                        <el-option v-for="b in rolesAll"
                                   v-if="b.roleid!=1"
                                   :label="b.rolename" :value="b.roleid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="diaoliDialog=false">取 消</el-button>
                <el-button type="primary" @click="dianzhangdiaoli()">确 定</el-button>
            </span>
        </template>
    </el-dialog>
    <%--分页--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<script>
    // 门店编号自定义校验
    var checkBaranchid = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('门店编号不能为空'));
        } else {//长度不能超过8
            if (value.length > 8) {
                return callback(new Error('门店编号不能超过8位'));
            }
            setTimeout(() => {
                //判断唯一
                axios.get("/branch/checkBranchid?branchid=" + value).then(resp => {
                    console.log(resp);
                    if (resp.data.code === 500) {
                        callback(new Error('已存在'));
                    } else {
                        callback();
                    }
                })
            }, 10);
        }
    }
    // 门店名自定义校验
    var checkBaranchname = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('门店名称不能为空'));
        }
        setTimeout(() => {
            //判断唯一
            axios.get("/branch/checkBranchname?branchname=" + value).then(resp => {
                console.log(resp);
                if (resp.data.code === 500) {
                    callback(new Error('已存在'));
                } else {
                    callback();
                }
            })
        }, 10);
    }
    //编辑门店名不能为空
    var rules1name = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('门店名称不能为空'));
        }
    }
    //门店地址不能为空自定义判断
    var rules1address = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('门店地址不能为空'));
        }
    }
    let app = new Vue({
        el: "#app",
        data: { //属性
            店长: "店长",
            //分页信息
            currentPage: 1,//当前页码
            pageSize: 5,//每页显示的条数
            total: 0,//总记录数
            //添加商铺对话框
            dialogVisible: false,
            //修改对话框
            editDialog: false,
            //更换店长对话框
            gengDialog: false,
            //调离店长对话框
            diaoliDialog: false,
            //数据回显表单
            editForm: {},
            // 查询表单
            selectForm: {},
            //店铺信息集合
            branchInFo: undefined,
            //所有职位
            rolesAll: undefined,
            //添加店铺表单
            addbranch: {},
            //更换店长表单
            gengForm: {},
            //调离店长表单
            diaoliForm: {
                newbranchid: '',
                newbranchname: '',
            },
            User: {},
            //所有门店信息
            allBranch: undefined,
            //不是店长的所有人员工信息
            staffList: undefined,


            //限制输入
            rules1: {
                branchname: [
                    {validator: rules1name, trigger: 'blur'}
                ],
                address: [
                    {validator: rules1address, trigger: 'blur'}
                ],
            },
            //限制输入
            rules: {
                branchid: [
                    {validator: checkBaranchid, trigger: 'blur'}
                ],
                branchname: [
                    {validator: checkBaranchname, trigger: 'blur'}
                ],
                starttime: [
                    {required: true, message: '请选择开店时间', trigger: 'blur'}
                ],
                address: [
                    {required: true, message: '请输入门店地址', trigger: 'blur'}
                ],
                staffid: [
                    {required: true, message: '请选择店长', trigger: 'blur'}
                ],
                state: [
                    {required: true, message: '请选择状态', trigger: 'blur'}
                ],
            },

        },
        //自启动
        created() {
            // 加载所有商铺信息
            this.branchAll();
            ///查询所有员工信息
            this.selectStaff();
            this.roleAll();//加载所有职位
            this.loadAllBranch();//加载所有门店
            this.getUser();
        },
        //方法
        methods: {
            //获取当前登录着的信息
            getUser() {
                axios.get("/staff/getStaffInfo").then(resp => {
                    this.User = resp.data.data;
                })
            },
            //店长调离方法
            dianzhangdiaoli() {
                //console.log(this.diaoliForm)
                axios.post("/branch/dianzhangdiaoli", this.diaoliForm).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message({
                            message: '调离店长成功',
                            type: 'success'
                        });
                        this.diaoliDialog = false;
                        this.branchAll();
                    } else {
                        this.$message({
                            message: '调离店长失败',
                            type: 'error'
                        });
                    }
                    this.diaoliForm = {};
                    this.selectStaff();
                    this.roleAll();//加载所有职位
                    this.loadAllBranch();//加载所有门店
                })
            },
            //加载所有门店 //查询所有门店不包含小张店
            loadAllBranch() {
                axios.get("/branch/list").then(resp => {
                    this.allBranch = resp.data.data;
                })
            },
            //加载所有 正常状态下的 职位
            roleAll() {
                axios.get("/role/roleAll").then(resp => {
                    this.rolesAll = resp.data.data;
                })
            },
            //更换店长判断店长是否为空
            gengpanduan(row) {
                if (row.staffname != null) {
                    //console.log(row.staffname)
                    this.$message({
                        message: "店长已存在，无法更换店长",
                        type: 'error'
                    });
                    return this.gengDialog = false;
                } else {
                    //什么意思
                    // 对话框显示，回显数据
                    this.gengForm.branchid = row.branchid;
                    this.gengForm.branchname = row.branchname;
                    return this.gengDialog = true;
                }
            },
            //店长调离，判断当前是否有点店长，没有店长提示不用调离
            diaoli(row) {
                //console.log(row)
                if (row.staffname == null) {
                    this.$message({
                        message: "当前没有店长，无需调离",
                        type: 'error'
                    });
                } else {
                    // 调用更换店长方法
                    this.diaoliForm = row;
                    //console.log(this.diaoliForm,"~~~~~~~~~~~~~~~~~~~~~~")
                    //对话框显示，回显数据
                    return this.diaoliDialog = true;
                    this.selectStaff();
                    this.roleAll();//加载所有职位
                    this.loadAllBranch();//加载所有门店
                }
            },
            //删除方法
            deleteBranch(row) {
                axios.get("/branch/deleteBranch?branchid=" + row.branchid).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message({
                            message: "删除成功",
                            type: 'success'
                        });
                        this.branchAll();
                    } else {
                        this.$message({
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }
                    this.selectStaff();
                })
            },
            //整顿方法
            zhengDun(row) {
                //修改门店当前状态
                axios.get("/branch/updateState?branchid=" + row.branchid + "&state=" + row.state).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: "修改成功",
                            type: 'success'
                        });
                        this.branchAll();
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                    this.selectStaff();
                })
            },
            //取消整顿
            quxiao() {
                this.$message({
                    message: "取消",
                    type: 'error'
                });
            },
            //修改店长方法
            updatedianzhang() {
                axios.get("/branch/updatedianzhang?branchid=" + this.gengForm.branchid + "&staffid=" + this.gengForm.staffname).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: "修改成功",
                            type: 'success'
                        });
                        this.gengDialog = false;
                        this.branchAll();
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                    this.selectStaff();
                })
                // console.log(this.editForm.branchname);
                // console.log(this.editForm.branchid);
                // console.log(this.editForm.staffname)
            },
            //确认修改
            okEditBranch() {
                axios.post("/branch/updateBranch", this.editForm).then(res => {
                    //console.log(res);
                    if (res.data.code === 200) {
                        this.$message({
                            message: "修改成功",
                            type: 'success'
                        });
                        this.editDialog = false;
                        this.branchAll();
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                    this.selectStaff();
                })
            },
            //编辑数据回显
            editBranch(row) {
                axios.get("/branch/getBranchByBranchId?branchid=" + row.branchid).then(res => {
                    //console.log(res);
                    this.editDialog = true;
                    this.editForm = res.data.data;
                })
            },

            //获取不是店长的所有人员工信息
            selectStaff() {
                axios.get("/staff/selectStaff").then(res => {
                    //console.log(res);
                    this.staffList = res.data.data;
                })
            },
            //确认添加门店
            okAddBranch() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        axios.post("/branch/addBranch", this.addbranch).then(res => {
                            //console.log(res);
                            this.dialogVisible = false;
                            this.branchAll();
                            if (res.data.code === 200) {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }
                        })
                        this.selectStaff();
                        this.loadAllBranch();
                        this.addbranch = {};
                    }
                })
            },
            // 每页条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.branchAll();
                this.branchAll();
            },
            // 页码
            handleCurrentChange(val) {
                this.currentPage = val;
                this.branchAll();
            },
            //表格中行的样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 === 1) {
                    return 'warning-row';
                } else if (rowIndex % 4 === 3) {
                    return 'success-row';
                }
                return '';
            },
            //加载所有商铺信息
            branchAll() {
                axios.post("/branch/getAllAndName?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize, this.selectForm).then(res => {
                    //console.log(res);
                    this.branchInFo = res.data.data.list;
                    this.total = res.data.data.total;
                })
            },
            // 关闭对话框
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //表单重置
            addClose() {
                this.$refs.form.resetFields();
                // this.$refs.diaoliForm.resetFields();
                // this.$refs.editForm.resetFields();
                // this.$refs.addbranch.resetFields();
            },
            closeDiaoLi() {
                this.$refs.diaoliForm.resetFields();
            },
            closeAdd() {
                this.$refs.addbranch.resetFields();
            }
        }
    })
</script>
</html>
